<template>
	<view class="container">
		<view class="header">
			<text class="title">我的奖品</text>
			<text class="subtitle">查看您的中奖记录和奖品</text>
		</view>
		
		<view class="prize-stats">
			<view class="stat-card">
				<text class="stat-number">{{ totalPrizes }}</text>
				<text class="stat-label">总中奖数</text>
			</view>
			<view class="stat-card">
				<text class="stat-number">{{ usedPrizes }}</text>
				<text class="stat-label">已使用</text>
			</view>
			<view class="stat-card">
				<text class="stat-number">{{ availablePrizes }}</text>
				<text class="stat-label">待使用</text>
			</view>
		</view>
		
		<view class="prize-tabs">
			<view 
				class="tab-item" 
				:class="{ active: currentTab === 'available' }"
				@click="switchTab('available')"
			>
				待使用
			</view>
			<view 
				class="tab-item" 
				:class="{ active: currentTab === 'used' }"
				@click="switchTab('used')"
			>
				已使用
			</view>
			<view 
				class="tab-item" 
				:class="{ active: currentTab === 'expired' }"
				@click="switchTab('expired')"
			>
				已过期
			</view>
		</view>
		
		<view class="prize-list">
			<view class="prize-item" v-for="(prize, index) in currentPrizeList" :key="index">
				<view class="prize-image">
					<image :src="prize.image" mode="aspectFill"></image>
					<view class="prize-status" :class="prize.status">
						{{ getStatusText(prize.status) }}
					</view>
				</view>
				<view class="prize-info">
					<text class="prize-name">{{ prize.name }}</text>
					<text class="prize-desc">{{ prize.description }}</text>
					<text class="prize-date">获得时间：{{ prize.date }}</text>
					<text class="prize-expire" v-if="prize.expireDate">有效期至：{{ prize.expireDate }}</text>
				</view>
				<view class="prize-actions">
					<button 
						class="action-btn" 
						:class="prize.status"
						@click="handlePrize(prize)"
						:disabled="prize.status !== 'available'"
					>
						{{ getActionText(prize.status) }}
					</button>
				</view>
			</view>
		</view>
		
		<view class="empty-state" v-if="currentPrizeList.length === 0">
			<text class="empty-text">暂无{{ getTabText() }}奖品</text>
		</view>
		
		<!-- 设计图参考 -->
		<view class="design-reference">
			<text class="reference-title">设计参考图</text>
			<image class="design-image" :src="getImageUrl('体彩小程序文件夹(_F)/JPG/1021-04.jpg')" mode="aspectFit"></image>
		</view>
	</view>
</template>

<script>
import { getImageUrl } from '@/api/config'

export default {
	data() {
		return {
			currentTab: 'available',
			totalPrizes: 8,
			usedPrizes: 3,
			availablePrizes: 5,
			allPrizes: [
				{
					id: 1,
					name: '5元现金红包',
					description: '可直接提现到微信零钱',
					image: getImageUrl('prize1.jpg'),
					status: 'available',
					date: '2024-10-25',
					expireDate: '2024-11-25'
				},
				{
					id: 2,
					name: '10元现金红包',
					description: '可直接提现到微信零钱',
					image: getImageUrl('prize2.jpg'),
					status: 'available',
					date: '2024-10-24',
					expireDate: '2024-11-24'
				},
				{
					id: 3,
					name: '1元现金红包',
					description: '可直接提现到微信零钱',
					image: getImageUrl('prize3.jpg'),
					status: 'used',
					date: '2024-10-23',
					expireDate: '2024-11-23'
				},
				{
					id: 4,
					name: '20元现金红包',
					description: '可直接提现到微信零钱',
					image: getImageUrl('prize4.jpg'),
					status: 'expired',
					date: '2024-10-20',
					expireDate: '2024-10-25'
				}
			]
		}
	},
	computed: {
		currentPrizeList() {
			return this.allPrizes.filter(prize => prize.status === this.currentTab)
		}
	},
	methods: {
		getImageUrl,
		switchTab(tab) {
			this.currentTab = tab
		},
		getStatusText(status) {
			const statusMap = {
				available: '待使用',
				used: '已使用',
				expired: '已过期'
			}
			return statusMap[status] || ''
		},
		getActionText(status) {
			const actionMap = {
				available: '立即使用',
				used: '已使用',
				expired: '已过期'
			}
			return actionMap[status] || ''
		},
		getTabText() {
			const tabMap = {
				available: '待使用',
				used: '已使用',
				expired: '已过期'
			}
			return tabMap[this.currentTab] || ''
		},
		handlePrize(prize) {
			if (prize.status === 'available') {
				uni.showModal({
					title: '使用奖品',
					content: `确定要使用${prize.name}吗？`,
					success: (res) => {
						if (res.confirm) {
							// 处理奖品使用逻辑
							prize.status = 'used'
							this.usedPrizes++
							this.availablePrizes--
							uni.showToast({
								title: '奖品使用成功',
								icon: 'success'
							})
						}
					}
				})
			}
		}
	}
}
</script>

<style scoped>
.container {
	background-color: #f8f8f8;
	min-height: 100vh;
}

.header {
	text-align: center;
	padding: 30rpx 20rpx;
	background: white;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: 28rpx;
	color: #666;
}

.prize-stats {
	display: flex;
	padding: 20rpx;
	gap: 20rpx;
}

.stat-card {
	flex: 1;
	background: white;
	padding: 30rpx;
	border-radius: 20rpx;
	text-align: center;
}

.stat-number {
	font-size: 48rpx;
	font-weight: bold;
	color: #4A90E2;
	display: block;
	margin-bottom: 10rpx;
}

.stat-label {
	font-size: 24rpx;
	color: #666;
}

.prize-tabs {
	display: flex;
	background: white;
	margin: 20rpx;
	border-radius: 20rpx;
	overflow: hidden;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 30rpx;
	font-size: 28rpx;
	color: #666;
	background: #f9f9f9;
}

.tab-item.active {
	background: #4A90E2;
	color: white;
}

.prize-list {
	padding: 20rpx;
}

.prize-item {
	display: flex;
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	align-items: center;
}

.prize-image {
	position: relative;
	width: 120rpx;
	height: 120rpx;
	margin-right: 20rpx;
}

.prize-image image {
	width: 100%;
	height: 100%;
	border-radius: 15rpx;
}

.prize-status {
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	padding: 5rpx 10rpx;
	border-radius: 15rpx;
	font-size: 20rpx;
	color: white;
}

.prize-status.available {
	background: #4A90E2;
}

.prize-status.used {
	background: #999;
}

.prize-status.expired {
	background: #ff6b6b;
}

.prize-info {
	flex: 1;
}

.prize-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 5rpx;
}

.prize-desc {
	font-size: 24rpx;
	color: #666;
	display: block;
	margin-bottom: 5rpx;
}

.prize-date {
	font-size: 22rpx;
	color: #999;
	display: block;
	margin-bottom: 5rpx;
}

.prize-expire {
	font-size: 22rpx;
	color: #ff6b6b;
	display: block;
}

.prize-actions {
	margin-left: 20rpx;
}

.action-btn {
	width: 120rpx;
	height: 60rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	border: none;
}

.action-btn.available {
	background: #4A90E2;
	color: white;
}

.action-btn.used,
.action-btn.expired {
	background: #ccc;
	color: #999;
}

.empty-state {
	text-align: center;
	padding: 100rpx 20rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

.design-reference {
	background: rgba(255,255,255,0.9);
	border-radius: 20rpx;
	padding: 30rpx;
	margin: 20rpx;
	box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.1);
}

.reference-title {
	display: block;
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
	text-align: center;
	margin-bottom: 20rpx;
}

.design-image {
	width: 100%;
	max-height: 400rpx;
	border-radius: 10rpx;
}
</style>
